﻿@page "/transfers"

<h3>Transfer 穿梭框</h3>

<Block Title="基础用法" Introduction="" CodeFile="transfer.1.html">
    <Transfer Items="@Items" ItemsChanged="@OnItemsChanged"
              LeftPanelText="候选项列表" RightPanelText="已选项列表" />

    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="可自定义" Introduction="可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。" CodeFile="transfer.2.html">
    <Transfer Items="@Items"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边" />
</Block>

<Block Title="可搜索" Introduction="在数据很多的情况下，可以对数据进行搜索和过滤。" CodeFile="transfer.3.html">
    <Transfer Items="@Items"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边"
              LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
              ShowSearch="true" />
</Block>

<Block Title="双向绑定" Introduction="组件数据发生变化时，更新绑定数据源 <code>Items</code>" CodeFile="transfer.4.html">
    <p>本例中 <code>Transfer</code> 组件双向绑定数据源 <code>Item1</code>，左右移动数据后，源集合中 <code>Active = false</code> 的为左侧面板中数据集合，<code>Active = true</code> 的为右侧面板中数据集合</p>
    <Transfer @bind-Items="@Items1"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边" />
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入" CodeFile="transfer.5.html">
    <Transfer Items="@Items" IsDisabled="true"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边"
              LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
              ShowSearch="true" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />